<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>后台登录-X-admin2.0</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />

    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/css/font.css">
	<link rel="stylesheet" href="/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>

</head>
<body class="login-bg">
    
    <div class="login">
        <div class="message">xx系统-管理登录</div>
        <div id="darkbannerwrap"></div>
       
        <button id="userBtn" type="button" 	class="layui-btn layui-btn-primary" onclick="changeView(0)">用户密码登录</button>
        <button id="smsBtn" type="button" 	class="layui-btn" onclick="changeView(1)">短信验证码登录</button>
        
		<hr class="hr15">
       
        <form method="post" class="layui-form" id="user" style="display: none;">
            <input name="username" placeholder="用户名"  type="text" lay-verify="required" class="layui-input" >
            <hr class="hr15">
            <input name="password" lay-verify="required" placeholder="密码"  type="password" class="layui-input">
            <hr class="hr15">
            <input value="登录" lay-submit lay-filter="userLogin" style="width:100%;" type="submit">
            <hr class="hr20" >
        </form>
        
         <form method="post" class="layui-form" id="sms">
            <input name="tel" id="tel" placeholder="电话"  type="text" lay-verify="phone" class="layui-input" >
            <hr class="hr15">
            <input name="code" lay-verify="required" placeholder="验证码"  type="password" style="width:200px" class="layui-input layui-col-sm2 ">
            <div id="send">
                <button type="button" style="margin-left: 10px;"	class="layui-btn layui-btn-xs" onclick="sendSms()" >发送验证码</button>
            </div>

            <hr class="hr15">
            <input value="登录" lay-submit lay-filter="smdLogin" style="width:100%;" type="submit">
            <hr class="hr20" >
        </form>
        
    </div>

    <script>
        layui.use('form', function(){
            var form = layui.form;
            //监听提交
            form.on('submit(smdLogin)', function(data){
                $.ajax({
                    url:"/day02/smsLogin",
                    type:"get",
                    data:data.field,
                    dataType:"json", //返回类型
                    success:function(data){

                        layer.alert(data.info);
                        if(data.info=="登录成功"){
                            //访问主页面
                            location.href="/day02/index"
                        }
                    }
                })
                return false;
            });
        });

        function changeView(num){
            if (num==1){
                console.log(num)
                //显示短信的表单
                $("#sms").show()
                //移除白色按钮样式
                $("#smsBtn").removeClass("layui-btn layui-btn-primary")
                //添加蓝色按钮样式
                $("#smsBtn").addClass("layui-btn")

                //隐藏用户密码登录的表单
                $("#user").hide()
                //移除蓝色按钮样式
                $("#userBtn").removeClass("layui-btn")
                //添加白色色按钮样式
                $("#userBtn").addClass("layui-btn layui-btn-primary")
            }else{
                console.log(num)

                $("#user").show()
                $("#userBtn").removeClass("layui-btn layui-btn-primary")
                $("#userBtn").addClass("layui-btn")


                $("#sms").hide()
                $("#smsBtn").removeClass("layui-btn")
                $("#smsBtn").addClass("layui-btn layui-btn-primary")
            }
        }
        //计时器秒
        var s =3
        //发送短信
        function sendSms(){
           var tel = $("#tel").val()
            $.ajax({
                url:"/day02/sendSms",
                type:"get",
                data:{"phone":tel},
                dataType:"json", //返回类型
                success:function(data){
                    console.log(data)
                    layer.alert(data.info);
                }
            })


            var time = setInterval(function () {
                //禁用发送验证码按钮
                $("#send").html("<button type='button'  class='layui-btn layui-btn-disabled layui-btn-small' >"+s+"秒后发送验证码</button>")
                s--;
                if(s==0){ //倒计时结束
                    //清除计时器
                    clearInterval(time);
                    //启用发送验证码
                    $("#send").html("<button type='button' class='layui-btn' onclick=\"sendSms()\">发送验证码</button>")
                }

            },1000)

        }
    </script>

</body>
</html>